[Material-UI] makeStyles（CSS in JS）を使って同心円を描画する

若槻龍太

2021.09.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 IoT事業部の若槻です。

React向けのUIライブラリMaterial-UIでは、@material-ui/styles ComponentのmakeStylesを使うことにより、CSS in JSでのReact要素のスタイリングを行うことができます。

@material-ui/styles - Material-UI

今回は、makeStyles（CSS in JS）を使って同心円を書いてみました。

円1つの場合

デモ

コード概要

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

//makeStylesでCSS in JSのスタイルを定義
const useStyles = makeStyles({
  outerCircle: {
    margin: "auto",
    width: "300px",
    height: "300px",
    position: "relative",
    border: "solid #4169e1 5px",
    "border-radius": "50%"
  }
});

export const App: React.FC = () => {
  const classes = useStyles();

  return (
    <>
      <div className={classes.outerCircle}></div>
    </>
  );
};

@material-ui/stylesでのCSS in JSの定義はmakeStylesを使用します。
makeStylesではオブジェクト形式であること以外は、通常のCSSとほぼ同じ書き方が可能です。
CSSで円を描く場合は"border-radius": "50%"とします。これによりボーダーの角の半径が最大となり、円を描くことができます。
作成したスタイルをReact要素（JSXタグ）に適用すれば円を描画できます。

円2つの同心円

デモ

コード概要

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  outerCircle: {
    margin: "auto",
    width: "300px",
    height: "300px",
    position: "relative",
    border: "solid #4169e1 5px",
    "border-radius": "50%"
  },
  innerCircle1: {
    width: "250px",
    height: "250px",
    position: "absolute",
    border: "solid #4169e1 5px",
    "border-radius": "50%",
    top: "50%",
    left: "50%",
    transform: "translate(-50%,-50%)"
  }
});

export const App: React.FC = () => {
  const classes = useStyles();

  return (
    <>
      <div className={classes.outerCircle}>
        <div className={classes.innerCircle1}></div>
      </div>
    </>
  );
};

円1つの場合のコードにハイライトした行を追加しています。
同心円を描く場合、内側の円の要素を一番外側の円の要素で囲みます。
CSSの記述ではposition: "absolute"として上位の要素内での絶対位置を指定し、配置が重なるようにします。
top: "50%"、left: "50%"、transform: "translate(-50%,-50%)"を使用して上位要素内での位置関係を調整し、同心円となるようにします。

円3つ以上の同心円

デモ

コード概要

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  outerCircle: {
    margin: "auto",
    width: "300px",
    height: "300px",
    position: "relative",
    border: "solid #4169e1 5px",
    "border-radius": "50%"
  },
  innerCircle1: {
    width: "250px",
    height: "250px",
    position: "absolute",
    border: "solid #4169e1 5px",
    "border-radius": "50%",
    top: "50%",
    left: "50%",
    transform: "translate(-50%,-50%)"
  },
  innerCircle2: {
    width: "200px",
    height: "200px",
    position: "absolute",
    border: "solid #4169e1 5px",
    "border-radius": "50%",
    top: "50%",
    left: "50%",
    transform: "translate(-50%,-50%)"
  },
  innerCircle3: {
    width: "150px",
    height: "150px",
    position: "absolute",
    border: "solid #4169e1 5px",
    "border-radius": "50%",
    top: "50%",
    left: "50%",
    transform: "translate(-50%,-50%)"
  },
  innerCircle4: {
    width: "100px",
    height: "100px",
    position: "absolute",
    border: "solid #4169e1 5px",
    "border-radius": "50%",
    top: "50%",
    left: "50%",
    transform: "translate(-50%,-50%)"
  },
  innerCircle5: {
    width: "50px",
    height: "50px",
    position: "absolute",
    border: "solid #4169e1 5px",
    "border-radius": "50%",
    top: "50%",
    left: "50%",
    transform: "translate(-50%,-50%)"
  }
});

export const App: React.FC = () => {
  const classes = useStyles();

  return (
    <>
      <div className={classes.outerCircle}>
        <div className={classes.innerCircle1}></div>
        <div className={classes.innerCircle2}></div>
        <div className={classes.innerCircle3}></div>
        <div className={classes.innerCircle4}></div>
        <div className={classes.innerCircle5}></div>
      </div>
    </>
  );
};